<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<html>
<head>
    <title>分配分社</title>
    <link rel="stylesheet" href="${ctxStatic}/layui-v2.2.45/layui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/css/ui/circle/set_tag.css">
    <link rel="stylesheet" href="${ctx}/css/common/common.css">
    <script type="text/javascript" src='${ctxStatic}/jquery/jquery-2.1.4.min.js'></script>
    <script type="text/javascript" src="${ctx}/script/common/util.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/script/common/common.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/layui-v2.2.45/layui/layui.js"></script>
    <style>
        .tag-wrap-main{
            margin: 10px;
        }
        .tag-wrap-main .tag-item-main{
            float: left;
            margin: 5px;
            padding: 10px;
            background: #fff0f3;
            position: relative;
        }
        .tag-wrap-main .tag-item-main.active{
            color: #fff;
            background: #f4615c;
        }
        .tag-wrap-main  .tag-name-main {
            line-height: 25px;
            display: inline-block;
            vertical-align: middle;
            float: left;
        }
        .tag-wrap-main .tag-item-main:hover{
            cursor: pointer;
        }
        .label1 {
            line-height: 25px;
            display: inline-block;
            vertical-align: middle;
            float: left;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="label1">主分社--只能选择一个</div>
        <br>
        <div class="tag-wrap-main">
            <c:forEach var="memberGroup" items="${memberGroupList}">
                    <div class="tag-item-main" data-id="${memberGroup.id}" main-data-id="${memberGroup.id}">
                        <span class="tag-name-main">${memberGroup.realname}</span>
                    </div>
            </c:forEach>
        </div>
    </div>
    <div class="layui-row">
        <div class="label1">次分社</div>
        <br>
        <div class="tag-wrap">
            <c:forEach var="memberGroup" items="${memberGroupList}">
                <div class="tag-item" data-id="${memberGroup.id}" ci-data-id = "${memberGroup.id}">
                    <span class="tag-name">${memberGroup.realname}</span>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function () {
        var mainId = '${mainPartenrId}'
        if (mainId != '') {
            $('[main-data-id="' + mainId + '"]').addClass('active');
        }

        var userTag = '${partnerIds}';
        userTag = userTag.split(',');
        userTag.forEach(function (item) {
            $('[ci-data-id="' + item + '"]').addClass('active');
        })
        var split = '';
        $('.tag-wrap-main').delegate('.tag-item-main', 'click', function () {
            $(this).toggleClass('active');
            var ids = '';
            $.each($('.tag-item-main.active'), function () {
                ids += $(this).data('id') + ',';
            });
            split = ids.split(',');
            // alert(split)
            if (split.length > 2)
            {
                util.layerMsgError('"主分社只能选择一个"', {title: '通知', icon: 2, time: 2000})
                $(this).removeClass('active');
            }
            var idss = ''
            $.each($('.tag-item-main.active'), function () {
                idss += $(this).data('id') + ',';
            });
            var spilt2 = idss.split(',');
            // alert(spilt2);
            $('[ci-data-id="' + spilt2[0] + '"]').removeClass('active');

        })

        $('.tag-wrap').delegate('.tag-item', 'click', function () {
            $(this).toggleClass('active');
            var ids = '';
            $.each($('.tag-item-main.active'), function () {
                ids += $(this).data('id') + ',';
            });
            split = ids.split(',');
            $('[ci-data-id="' + split[0] + '"]').removeClass('active');
        })

    });

    function getArrEqual(arr1, arr2) {
        var newArr = [];
        for (var i = 0; i < arr2.length; i++) {
            for (var j = 0; j < arr1.length; j++) {
                if(arr1[j] === arr2[i]){
                    newArr.push(arr1[j]);
                }
            }
        }
        return newArr;
    };

    function doSubmit() {
        var ids = '';
        $.each($('.tag-item.active'), function () {
            ids += $(this).data('id') + ',';
        });
        var mainIds = '';
        $.each($('.tag-item-main.active'), function () {
            mainIds += $(this).data('id') + ',';
        });
        var flag = false;
        $.ajax({
            url: '${ctx}/member/membermgmt/xzgs/changeAccout.do',
            type: "POST",
            dataType: "JSON",
            async: false,
            data: {
                partnerIds: '${partnerIds}',
                memberId:'${memberId}',
                ids: ids,
                partnerMainIds: mainIds,
                partnerMainId:'${mainPartenrId}'
            },
            success: function (res) {
                if (res.success) {
                    util.layerMsgSuccess("分配成功")
                } else {
                    util.layerMsgError('分配失败：' + res.description, {title: '通知', icon: 2, time: 2000})
                }
                flag = res.success;
            }
        });
        return flag;
    }
</script>
</html>